<template>
	<view class="container">
		<uni-nav-bar dark :fixed="true" shadow background-color="#007AFF" 
			status-bar left-icon="left" left-text="返回"
			title="商品详情页面" @clickLeft="back" />
		<uni-section :title="goods.tmName" type="line">
			<uni-card :cover="cover">
				<image slot='cover' style="width: 100%;" :src="goods.defaultImg"></image>
				<text class="uni-body">{{goods.title}}</text>
				<br>
				<text class="uni-body">价格：{{goods.price}}</text>
				<view slot="actions" class="card-actions">
					<view class="card-actions-item" @click="actionsClick('收藏')">
						<uni-icons type="star" size="18" color="#999"></uni-icons>
						<text class="card-actions-item-text">收藏</text>
					</view>
					<view class="card-actions-item" @click="actionsClick('点赞')">
						<uni-icons type="heart" size="18" color="#999"></uni-icons>
						<text class="card-actions-item-text">点赞</text>
					</view>
					<view class="card-actions-item" @click="actionsClick('评论')">
						<uni-icons type="chatbubble" size="18" color="#999"></uni-icons>
						<text class="card-actions-item-text">评论</text>
					</view>
				</view>
			</uni-card>
		</uni-section>
		
		<uni-section title="加入购物车数量" type="line" padding>
			<uni-number-box v-model="num"  />
		</uni-section>
		<view class="goods-carts">
			<uni-goods-nav :options="options" :fill="true" :button-group="buttonGroup" @click="onClick"
				@buttonClick="buttonClick" />
		</view>
	</view>
	
</template>

<script>
import searchApi from '../../api/search/search.js'
import cartApi from '../../api/cart/cart.js'
export default {
	components: {},
	data() {
		return {
			cover: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
			goods:{},
			num:1,
			options: [{
					icon: 'chat',
					text: '客服'
				}, {
					icon: 'shop',
					text: '店铺',
					info: 2,
					infoBackgroundColor: '#007aff',
					infoColor: "#f5f5f5"
				}, {
					icon: 'cart',
					text: '购物车',
					info: 2
				}],
			buttonGroup: [{
					text: '加入购物车',
					backgroundColor: 'linear-gradient(90deg, #FFCD1E, #FF8A18)',
					color: '#fff'
				},
				{
					text: '立即购买',
					backgroundColor: 'linear-gradient(90deg, #FE6035, #EF1224)',
					color: '#fff'
				}
			]
		}
	},
	methods:{
		back() {
			uni.navigateBack({
				delta: 1
			})
		},
		onClick(e) {
			uni.showToast({
				title: `点击${e.content.text}`,
				icon: 'none'
			})
			debugger
			if(e.index == 2){
				uni.switchTab({
					url:'/gmall/views/cart/cart'
				})
			}
		},
		buttonClick(e) {
			console.log(e)
			this.options[2].info++
			if(e.index == 0){
				cartApi.addToCart(this.goods.id,this.num).then(res=>{
					uni.showToast({
						title: res.message,
						icon: 'none'
					})
				})
			}
		}
	},
	onLoad(options) {
		console.log(options.goodsId)
		searchApi.getGoodsById(options.goodsId).then(res=>{
			if(res.ok){
				this.goods = res.data;
			}
		})
	}
}
</script>
<style>
	.goods-carts {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		position: fixed;
		left: 0;
		right: 0;
		/* #ifdef H5 */
		left: var(--window-left);
		right: var(--window-right);
		/* #endif */
		bottom: 0;
	}
</style>
